<template>
    <el-container class="layout-container-demo">
        <el-aside width="200px">
            <side-menu />
        </el-aside>
        <el-container>
            <el-header style="text-align: right; font-size: 12px">
           <header-menu />
            </el-header>
            <el-main>
                <main-content />
            </el-main>
        </el-container>
    </el-container>
</template>
  
<script lang="ts" setup>
import SideMenu from '@/layouts/SideMenu/index.vue';
import MainContent from '@/layouts/mainContent.vue';
import HeaderMenu from '@/layouts/headerMenu.vue'
import { asideBg, asideWidth, mainBg } from '@/styles/variable.module.scss'; // 不能使用默认导出



</script>
  
<style scoped lang="scss">
@import '@/styles/variable.module.scss';

.layout-container-demo .el-header {
    position: relative;
    background-color: $mainBg;
    color: var(--el-text-color-primary);
    padding: 0 10px 0 0;
    border-bottom: 1px solid #edf2f9;
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: $asideBg;
    box-shadow: 0 3px 9px 0 rgba(169,184,200,.15);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
    background: $mainBg;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>